<!DOCTYPE html>
<!--
Copyright © 2018, Octave Online LLC

This file is part of Octave Online Server.

Octave Online Server is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or (at your
option) any later version.

Octave Online Server is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License
for more details.

You should have received a copy of the GNU Affero General Public License along
with Octave Online Server.  If not, see <https://www.gnu.org/licenses/>.
-->
<head>
	<title>Octave Online</title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<style type="text/css">
	body {
		width: 75%;
		background-color: #FF4B33; /* 2017 OO Fire Red */
		margin: 0 auto;
		padding: 0;
		font-family: "Trebuchet MS", sans-serif;
		font-size: 1.3em;
	}
	@media (max-width: 480px) {
		body {
			width: 100%;
		}
	}
	#main {
		background-color: #fff;
		margin: 0;
		padding: 10px;
		text-align: center;
	}
	h1 {
		margin: 0;
	}
	h1 > svg {
		max-width: 500px;
	}
	.max-width {
		max-width: 550px;
		margin-left: auto;
		margin-right: auto;
	}
	strong {
		color: #FF4B33;
	}
	ul {
		list-style-type: none;
		padding: 0;
	}
	li {
		margin: 0.5em 0;
	}
	button {
		background: #FF4B33;
		background-image: -webkit-linear-gradient(top, #FF4B33, #e83c25);
		background-image: -moz-linear-gradient(top, #FF4B33, #e83c25);
		background-image: -ms-linear-gradient(top, #FF4B33, #e83c25);
		background-image: -o-linear-gradient(top, #FF4B33, #e83c25);
		background-image: linear-gradient(to bottom, #FF4B33, #e83c25);
		-webkit-border-radius: 28;
		-moz-border-radius: 28;
		border-radius: 28px;
		font-family: Arial;
		color: #ffffff;
		font-size: 20px;
		padding: 10px 20px 10px 20px;
		text-decoration: none;
		cursor: pointer;
	}
	.btn:hover {
		text-decoration: none;
	}
	hr {
		border: 2px solid #FF4B33;
	}
	h3 {
		text-align: center;
		margin: 0.5em auto;
	}
	.policy {
		text-align: left;
		white-space: pre-wrap;
		padding: 1em;
		border: 2px solid #FF4B33;
		background-color: #FFE1DE;
	}
	#overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		background-color: #FF715E;
	}
	#overlay > div {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		height: 100%;
	}
	#overlay > div > div {
		position: absolute;
		top: -120px;
		left: -200px;
		width: 400px;
		height: 240px;
		overflow: hidden;
		box-sizing: border-box;
		padding: 10px 20px;
		background-color: white;
		text-align: center;
	}
	#overlay h2 {
		margin: 0 0 15px;
		padding: 0;
	}
	#overlay p {
		margin: 0 0 15px;
	}
	.highlight {
		color: #FF4B33;
	}
</style>
</head>

<script>
	function moreInfo() {
		document.getElementById("overlay").style.display = "none";
	}
</script>

<body>
	<div id="main">
		<h1 class="header-svg"><!-- Logo SVG --></h1>
		<p class="max-width"><strong>GDPR Compliance:</strong>  We value your privacy.  Before using <span class="notranslate">Octave Online</span>, please consent to our privacy policy:</p>
		<ul class="max-width">
			<li>&#x25BA; Your commands, script files, and other site activity are processed and stored by us and by Google Analytics.</li>
			<li>&#x25BA; We store cookies on your computer.</li>
			<li>&#x25BA; You can read the full policy below and can open a support ticket for any inquiries.</li>
		</ul>
		<div id="google_translate_element"></div>
		<p><button>I consent! Continue to <span class="notranslate">Octave Online</span></button></p>
		<hr/>
		<p><span class="notranslate">Octave Online</span> is a web UI for <span class="notranslate">GNU Octave</span>, the open-source alternative to <span class="notranslate">MATLAB</span>.  Thousands of students, educators, and researchers from around the world use <span class="notranslate">Octave Online</span> each day for studying machine learning, control systems, numerical methods, and more.</p>

		<blockquote class="policy"><h3>Full Privacy Policy</h3><!-- Privacy TXT --></blockquote>
	</div>
	<div id="overlay"><div><div>
		<p>
			<h2 class="highlight">GDPR Compliance</h2>
		</p>
		<p>
			We use <span class="highlight">cookies</span> and may record your <span class="highlight">IP address</span> with site activity.
		</p>
		<p>
			<button onclick="consent()">I agree; continue</button>
		</p>
		<p>
			<a href="javascript:moreInfo()">More Info</a>
		</p>
	</div></div></div>
	<script type="text/javascript">
		function googleTranslateElementInit() {
			new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL, autoDisplay: true}, 'google_translate_element');
		}
	</script>
	<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
